<!--
 * @Author: mayijun
 * @Date: 2022-06-22 09:41:11
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-09 17:58:57
-->
<script lang="ts" setup>
import {
  BUSINESS_NUMBER_TYPE,
  BUSINESS_STRING_TYPE,
  BUSINESS_BOOLEAN_TYPE,
  BUSINESS_DIMINSION_TYPE
} from '@/constants/indexDevelop';
import API from '@/services';
import { onMounted, PropType, reactive, ref, watch } from 'vue';
import ModelListLi from '../modelListLi/index.vue';
import { IconDown } from '@arco-design/web-vue/es/icon';
import { useRoute } from 'vue-router';

let props = defineProps({
  modelTableColumn: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  businessLimit: {
    type: Object as PropType<any>,
    default: () => {
      return {};
    }
  }
});

const route = useRoute();
//上线状态
let status = ref<any>(route.query.status);

let state = reactive({
  dataTypeList: [] as any[], //条件数组
  dataType: '', //字段类型
  modelTableColumnValue: '', //选择模型字段
  ifBindDimension: 0, //是否绑定维度
  dimensionList: [] as any[] //维度下拉选项
});

const initData = () => {
  let obj = props.modelTableColumn.find(
    (item) => item.value == state.modelTableColumnValue
  );
  if (!obj) {
    return false;
  }
  if (obj.dimensionId) {
    getGetDimensionEnum(obj.dimensionId);
  }

  //判断绑定维度
  state.ifBindDimension = obj.ifBindDimension;
  //数据类型
  state.dataType = obj.tableFieldType;

  let filterValue = props.businessLimit.countTypeDto.filterValue;
  //根据类型初始化下拉
  if (obj.ifBindDimension == 0) {
    if (obj.tableFieldType == 'INTEGER') {
      //数字整型类型
      state.dataTypeList = BUSINESS_NUMBER_TYPE;
      if (filterValue) {
        props.businessLimit.countTypeDto.filterValue = Number(filterValue);
      }
    } else if (obj.tableFieldType == 'DECIMAL') {
      //数字小数类型2位
      state.dataTypeList = BUSINESS_NUMBER_TYPE;
      if (filterValue) {
        props.businessLimit.countTypeDto.filterValue = Number(filterValue);
      }
    } else if (obj.tableFieldType == 'STRING') {
      //字符串类型
      state.dataTypeList = BUSINESS_STRING_TYPE;
    } else {
      //布尔类型
      state.dataTypeList = BUSINESS_BOOLEAN_TYPE;
      if (filterValue) {
        props.businessLimit.countTypeDto.filterValue = Number(filterValue);
      }
    }
  } else {
    //字符串类型
    state.dataTypeList = BUSINESS_DIMINSION_TYPE;
  }
  //选择的字段和表
  props.businessLimit.tableFieldColumn = obj.tableFieldName;
  props.businessLimit.tableFieldName = obj.tableName;
};

//改变表格字段事件
const modelTableColumnChange = (val: any) => {
  //先清空对象赋值
  props.businessLimit.countTypeDto = {
    begin: 0,
    countType: 0,
    countWay: '',
    end: 0,
    filterValue: ''
  };
  initData();
  if (state.ifBindDimension == 0) {
    if (state.dataType == 'STRING') {
      props.businessLimit.countTypeDto.filterValue = '';
    } else {
      props.businessLimit.countTypeDto.filterValue = 0;
    }
  } else {
    props.businessLimit.countTypeDto.filterValue = '';
  }
  //默认选中第一个
  props.businessLimit.countTypeDto.countWay = state.dataTypeList[0].value;
};

//数据类型切换
const dataTypeChange = () => {
  //先清空
  props.businessLimit.countTypeDto.begin = 0;
  props.businessLimit.countTypeDto.end = 0;
  props.businessLimit.countTypeDto.filterValue = '';

  if (props.businessLimit.countTypeDto.countWay == 'BETWEEN') {
    props.businessLimit.countTypeDto.begin = 0;
    props.businessLimit.countTypeDto.end = 0;
  } else if (
    props.businessLimit.countTypeDto.countWay != 'IS_NULL' &&
    props.businessLimit.countTypeDto.countWay != 'IS_NOT_NULL' &&
    state.dataType != 'STRING' &&
    state.ifBindDimension == 0
  ) {
    props.businessLimit.countTypeDto.filterValue = 0;
  }
};

//整体拆分切换
const countTypeChange = () => {
  //拆分
  if (props.businessLimit.countTypeDto.countType == 1) {
    props.businessLimit.countTypeDto.begin = 1;
    props.businessLimit.countTypeDto.end = 1;
  } else {
    props.businessLimit.countTypeDto.begin = 0;
    props.businessLimit.countTypeDto.end = 0;
  }
};

// 获取绑定维度时in和not in类型的下拉数据
const getGetDimensionEnum = async (id: any) => {
  try {
    const { code, data } = await API.dataTable.getDataTableGetDimensionEnumById(
      { id }
    );
    if (code === 200 && Array.isArray(data)) {
      state.dimensionList = data?.map((item) => {
        return {
          label: item.label,
          value: String(item.value)
        };
      });
    }
  } catch (error) {}
};

//回车判断是否多个值
const pressEnter = (inputValue: string) => {
  let oldValue = props.businessLimit.countTypeDto.filterValue;
  let newArray: any[] = inputValue.split(/[\s\n]/);
  newArray = newArray.filter((item) => item != '');
  if (Array.isArray(oldValue)) {
    //删除最后一个
    oldValue.pop();
    props.businessLimit.countTypeDto.filterValue = [...oldValue, ...newArray];
  } else {
    props.businessLimit.countTypeDto.filterValue = newArray;
  }
};

watch(
  () => props.modelTableColumn.length,
  () => {
    if (
      props.businessLimit.countTypeDto &&
      props.businessLimit.tableFieldName
    ) {
      state.modelTableColumnValue =
        props.businessLimit.tableFieldColumn +
        props.businessLimit.tableFieldName;
      initData();
    }
  },
  {
    immediate: true
  }
);
</script>
<template>
  <a-space class="business-line-item" :size="6" id="modelSelectId">
    <a-select
      :disabled="status == 1"
      :options="props.modelTableColumn"
      v-model="state.modelTableColumnValue"
      popup-container="#modelSelectId"
      style="width: 180px"
      placeholder="请选择"
      @change="modelTableColumnChange"
      :trigger-props="{
        contentClass: 'model-select'
      }"
      allow-search
    >
      <template #arrow-icon>
        <icon-down />
      </template>
      <template #label="{ data }">
        {{ data.tableFieldName }}
      </template>
      <template #option="{ data }">
        <ModelListLi :modelItem="data.raw"></ModelListLi>
      </template>
    </a-select>
    <!-- 条件选择开始 -->
    <a-select
      :disabled="status == 1"
      v-if="state.dataType == 'STRING' && state.ifBindDimension == 0"
      v-model="props.businessLimit.countTypeDto.countType"
      style="width: 78px"
      @change="countTypeChange"
    >
      <a-option :value="0" label="整体"></a-option>
      <a-option :value="1" label="拆分"></a-option>
    </a-select>
    <a-select
      :disabled="status == 1"
      v-if="
        props.businessLimit.countTypeDto.countType != 1 &&
        props.businessLimit.countTypeDto.countWay
      "
      :options="state.dataTypeList"
      v-model="props.businessLimit.countTypeDto.countWay"
      style="width: 130px"
      @change="dataTypeChange"
    >
    </a-select>
    <!-- 条件选择结束 -->
    <!-- 数字类型判断 -->
    <a-input-number
      :disabled="status == 1"
      v-if="
        props.businessLimit.countTypeDto.countType != 1 &&
        props.businessLimit.countTypeDto.countWay != 'IS_NULL' &&
        props.businessLimit.countTypeDto.countWay != 'IS_NOT_NULL' &&
        props.businessLimit.countTypeDto.countWay != 'BETWEEN' &&
        (state.dataType == 'INTEGER' || state.dataType == 'BOOLEAN') &&
        state.ifBindDimension == 0
      "
      v-model="props.businessLimit.countTypeDto.filterValue"
      :style="{ width: '150px' }"
      :min="0"
      :precision="0"
    />
    <a-input-number
      :disabled="status == 1"
      v-if="
        props.businessLimit.countTypeDto.countType != 1 &&
        props.businessLimit.countTypeDto.countWay != 'IS_NULL' &&
        props.businessLimit.countTypeDto.countWay != 'IS_NOT_NULL' &&
        props.businessLimit.countTypeDto.countWay != 'BETWEEN' &&
        state.dataType == 'DECIMAL' &&
        state.ifBindDimension == 0
      "
      v-model="props.businessLimit.countTypeDto.filterValue"
      :style="{ width: '150px' }"
      :min="0"
      :precision="2"
    />
    <div
      class="between-item"
      v-if="props.businessLimit.countTypeDto.countWay == 'BETWEEN'"
    >
      <div class="label" :style="{ marginLeft: '-6px' }">[</div>
      <a-input-number
        :disabled="status == 1"
        v-model="props.businessLimit.countTypeDto.begin"
        :style="{ width: '120px' }"
        :min="0"
        :precision="state.dataType == 'INTEGER' ? 0 : 2"
      />
      <div class="label">,</div>
      <a-input-number
        :disabled="status == 1"
        v-model="props.businessLimit.countTypeDto.end"
        :style="{ width: '120px' }"
        :min="0"
        :precision="state.dataType == 'INTEGER' ? 0 : 2"
      />
      <div class="label">]</div>
    </div>
    <!-- 字符串类型判断 -->
    <a-input
      :disabled="status == 1"
      v-if="
        (props.businessLimit.countTypeDto.countType == 0 &&
          (props.businessLimit.countTypeDto.countWay == 'EQUAL_TO' ||
            props.businessLimit.countTypeDto.countWay == 'NOT_EQUAL_TO' ||
            props.businessLimit.countTypeDto.countWay == 'LIKE' ||
            props.businessLimit.countTypeDto.countWay == 'NOT_LIKE') &&
          state.dataType == 'STRING' &&
          state.ifBindDimension == 0) ||
        (state.ifBindDimension == 1 &&
          (props.businessLimit.countTypeDto.countWay == 'EQUAL_TO' ||
            props.businessLimit.countTypeDto.countWay == 'NOT_EQUAL_TO'))
      "
      v-model="props.businessLimit.countTypeDto.filterValue"
      :style="{ width: '395px' }"
      placeholder="请输入"
    />
    <a-input-tag
      :disabled="status == 1"
      v-if="
        state.ifBindDimension == 0 &&
        props.businessLimit.countTypeDto.countType == 0 &&
        (props.businessLimit.countTypeDto.countWay == 'IN' ||
          props.businessLimit.countTypeDto.countWay == 'NOT_IN') &&
        state.dataType == 'STRING'
      "
      v-model="props.businessLimit.countTypeDto.filterValue"
      :style="{ width: '395px' }"
      placeholder="回车输入"
      @press-enter="pressEnter"
    />
    <div
      class="between-item"
      v-if="
        state.dataType == 'STRING' &&
        props.businessLimit.countTypeDto.countType == 1
      "
    >
      <div class="label" :style="{ marginLeft: '-6px' }">[</div>
      <div class="text">开始</div>
      <a-input-number
        :disabled="status == 1"
        v-model="props.businessLimit.countTypeDto.begin"
        :style="{ width: '78px', marginLeft: '4px', marginRight: '14px' }"
        :min="0"
        :precision="0"
      />
      <div class="text">长度</div>
      <a-input-number
        :disabled="status == 1"
        v-model="props.businessLimit.countTypeDto.end"
        :style="{ width: '78px', marginLeft: '4px' }"
        :min="0"
        :precision="0"
      />
      <div class="label">]</div>
      <a-select
        :disabled="status == 1"
        :options="state.dataTypeList"
        v-model="props.businessLimit.countTypeDto.countWay"
        style="width: 130px"
        @change="dataTypeChange"
      ></a-select>
      <a-input
        :disabled="status == 1"
        v-if="
          state.ifBindDimension == 0 &&
          (props.businessLimit.countTypeDto.countWay == 'EQUAL_TO' ||
            props.businessLimit.countTypeDto.countWay == 'NOT_EQUAL_TO' ||
            props.businessLimit.countTypeDto.countWay == 'LIKE' ||
            props.businessLimit.countTypeDto.countWay == 'NOT_LIKE')
        "
        v-model="props.businessLimit.countTypeDto.filterValue"
        :style="{ width: '395px', marginLeft: '6px' }"
        placeholder="请输入"
      />
      <a-input-tag
        :disabled="status == 1"
        v-if="
          state.ifBindDimension == 0 &&
          (props.businessLimit.countTypeDto.countWay == 'IN' ||
            props.businessLimit.countTypeDto.countWay == 'NOT_IN')
        "
        v-model="props.businessLimit.countTypeDto.filterValue"
        :style="{ width: '395px', marginLeft: '6px' }"
        placeholder="回车输入"
        @press-enter="pressEnter"
      />
    </div>
    <a-select
      :disabled="status == 1"
      v-if="
        state.ifBindDimension == 1 &&
        props.businessLimit.countTypeDto.countWay != 'IS_NULL' &&
        props.businessLimit.countTypeDto.countWay != 'IS_NOT_NULL' &&
        props.businessLimit.countTypeDto.countWay != 'EQUAL_TO' &&
        props.businessLimit.countTypeDto.countWay != 'NOT_EQUAL_TO'
      "
      :options="state.dimensionList"
      v-model="props.businessLimit.countTypeDto.filterValue"
      style="width: 395px"
      placeholder="请选择"
      :max-tag-count="3"
      multiple
    >
    </a-select>
  </a-space>
</template>
<style lang="scss" scoped>
@import './index.scss';
</style>